<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page import="kr.co.insoft.framework.config.Authorities" %>
<c:set var="CONTEXT">${pageContext.request.contextPath}</c:set>
<c:set var="cssUrl">${pageContext.request.contextPath}/resources/css</c:set>
<c:set var="jsUrl">${pageContext.request.contextPath}/resources/js</c:set>
<div class="col-sm-12 page-header custom-page-header">
	<h1><spring:message code="menu.comparison.monthly"/></h1>
	<small><spring:message code="menu.comparison.monthly.desc"/></small>
</div>
<!--  조회 설정 -->
<form:form modelAttribute="monthlyEntityModel" role="form" cssClass="form-horizontal">
<div class="form-group">
	<label class="col-sm-1 control-label text-center" style="margin-top:7px;"><spring:message code="configration.cloud.vender"/></label>
	<div class="col-sm-1">
		<select id="venderId" name="venderId" class="form-control">
			<option value=""><spring:message code="select.seleted.all"/></option>
			<c:forEach items="${venderList }" var="list">
            	<option value="${list.venderid }">${list.venderName }</option>
            </c:forEach>
		</select>
	</div>
	<div class="col-sm-1">
		<spring:message code="comparison.monthly.from.desc" var="msgDesc"/>
		<form:input path="fromDate" cssClass="form-control" placeholder="${msgDesc}"/>
	</div>
	<div class="col-sm-1">
		<spring:message code="comparison.monthly.to.desc" var="msgDesc"/>
		<form:input path="toDate" cssClass="form-control" placeholder="${msgDesc}"/>
	</div>
	<button class="btn btn-primary viewChartBtn" type="button">
		<spring:message code="button.print"/>
	</button>
</div>
</form:form>
<!-- 차트 컨테이너 -->
<div class="form-group">
	<div id="container" style="height:400px;">
	</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	/* 조회 */
	$(document).on("click", ".viewChartBtn", function() {
		Loading.show();
		console.log($("#monthlyEntityModel").serialize());
		$.post("./chart",  $("#monthlyEntityModel").serialize() , function(res) {
		}).fail(function() {
			bootbox.alert("<spring:message code='common.server.fail'/>");
		}).done(function(res) {
			if(!res[0]){
				bootbox.alert("<spring:message code='list.no.result'/>");
				drawMonthlyChart(new Object(res));
			}
			else {
				drawMonthlyChart(new Object(res));	
			}
		}).always(function() {
			Loading.hide();
		});
	});	
	
	$('#fromDate').datepicker({
		format : "yyyy-mm",
	    startView: 1,
	    minViewMode: 1,
	    autoclose: true
	});
	$('#toDate').datepicker({
		format : "yyyy-mm",
	    startView: 1,
	    minViewMode: 1,
        autoclose: true
	});
});	
 
/* 차트 */
function drawMonthlyChart(dataList) {

	var xAxis = {
		categories : []
	};
	var options = {
		chart : {
			renderTo : 'container',
			type : 'line',
			marginBottom : 100,
			marginRight : 50
		},
		title : {
			text : 'Cost Monthly Chart'
		},
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Cost ($)'
            }
        },
		series : [],
		xAxis : [],
		tooltip : {
			shared: true
		},
		legend : {
			align : 'center',
			verticalAlign : 'bottom',
			y : 15,
			borderWidth : 0
		},
        tooltip: {
            crosshairs: true,
            shared: true
        },

	};
	var cloudGroupCnt=0;
	var cloudGroupNm=[];
	var cloudChkNm='';
	$.each(dataList, function(i, item) {
		if(cloudChkNm != this.venderName){	
			cloudChkNm = this.venderName;
			cloudGroupCnt++;
			cloudGroupNm.push(this.venderName);
		}
	});
	$.each(cloudGroupNm, function(idx, value){
		var cloudGrpNm = value;			
		var seriesArr = {
			name : cloudGrpNm,
			data :[],
			dataLabels:{
				enabled: false
			}
		};
		$.each(dataList, function(i, item) {			
			if(cloudGrpNm == this.venderName){				
				seriesArr.data.push(parseFloat(Math.round(parseFloat(this.cost)*100)/100));
				if(idx == 0 ){
					xAxis.categories.push(this.usageDate);
				}
			}	
		});
		options.series.push(seriesArr);
	});
	options.xAxis.push(xAxis);		
	chart = new Highcharts.Chart(options);
}
 </script>
